<template>
    <view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="订单详情" navbarType='0' fontColor="#FFFFFF" :bgColor="themeColor" leftIconColor="#FFFFFF"></wlk-navbar>
        <block v-if="!loading">
            <view class="detail-bc" :style="{background:' linear-gradient(to bottom,'+themeColor+' ,'+ color+')'}">
                <view class="d-status bgw br08 pd30">
                    <view class="wlkflex justify-between status-info">
                        <view class="status-text bold">{{order.status_text}}</view>
                        <view class="wlkflex time-info justify-between" v-if="order.status=='0' && order.expiretime>0">
                            <view class="title mr05">支付剩余</view>
                            <u-count-down
                                    :time="order.counttime"
                                    format="HH:mm:ss"
                                    autoStart
                                    millisecond
                                    @change="onChange"
                            >
                                <view class="time">
                                    <text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}时</text>
                                    <text class="time__item">{{ timeData.minutes }}分</text>
                                    <text class="time__item">{{ timeData.seconds }}秒</text>
                                </view>
                            </u-count-down>
                        </view>
                    </view>
                    <view class="desc mt20"  v-if="order.status=='0'">
                        请您尽快支付，超时会自动取消且需要重新下单哦
                    </view>
                    <u-divider></u-divider>
                    <view class="wlkflex order-info mt30 justify-between">
                        <view class="order-title mr10">订单编号：</view>
                        <view class="wlkflex col9">
                            {{order.order_sn}}
                            <view class="ml20 copy-btn" @click="copyOrderSn(order.order_sn)">
                                复制
                            </view>
                        </view>
                    </view>
                </view>
            </view>
             <view class="pd030 mt30">
                 <view class="goods-list bgw pd30 br08">
                     <view class="head-title bold wlkflex">
                         <u-avatar :src="initMain.logo" size="25"></u-avatar>
                         <view class="ml10">{{initMain.system_name}}</view>
                     </view>
                    <navigator :url="'/pages/goods/detail?id=' + good.goods_id" class="goods-info mt30 wlkflex justify-between wd100 align-start bgw wrap" v-for="good in order.item">
                        <view class="o-info-img br04 overHidden">
                            <image class="wd100 hg100" lazy-load :src="good.goods_images[0]"  mode="aspectFill"/>
                        </view>
                        <view class="o-info-main">
                            <view class="o-main-title u-line-2">
                                {{good.goods_title}}
                            </view>
                            <view class="wlkflex justify-between mt10">
                                <view class="o-main-date">
                                    x <text class="ml05">{{good.goods_quantity}}</text>
                                </view>
                                <view class="o-main-price bold">
                                    ¥ <text>{{good.total_fee}}</text>
                                </view>
                            </view>
                            <block v-if="good.refund_id==0 && order.status>0">
                                <view class="wlkflex justify-between mt20" v-if="!$u.test.isEmpty(good.verify_info)">
                                    <view @click.stop="qrCode(good.verify_info.list)" class="o-main-qrcode wlkflex justify-between">
                                        <i class="gg-tikcode" style="color:#666;transform: scale(.8);"></i>
                                        <text class="ml05">核销码</text>
                                    </view>
                                    <view class="o-main-status ">
                                        <block v-if="order.status==0">
                                            <u-text type="error" align="right" size="14" :text="order.status_text"></u-text>
                                        </block>
                                        <block v-else>
                                            <u-text type="warning" v-if="good.verify_info.status=='0'" align="right" size="14" :text="good.verify_info.status_text"></u-text>
                                            <u-text :color="themeColor" v-if="good.verify_info.status == '1'" align="right" size="14" :text="good.verify_info.status_text"></u-text>
                                            <u-text type="info" v-if="good.verify_info.status>'1'" align="right" size="14" :text="good.verify_info.status_text"></u-text>
                                        </block>
                                    </view>
                                </view>
                            </block>

                     </view>
                     <view class="goods-btn mt20 wlkflex justify-end wd100" @click.stop="showRefund(good)" v-if="order.status>0">
                         <u-button :customStyle="{
			                margin:'0',
			                width:'25%',
			                height:'65rpx'
                      }" :type="good.refund_id>0?'warning':'info'" plain shape="circle"  :text="good.refund_id>0?good.refund_info.refund_status_text:'申请退款'"></u-button>
                     </view>
                    </navigator>
                     <u-divider></u-divider>
                     <view class="wlkflex other-info mt30 justify-between">
                         <view class="order-title mr10">商品总价：</view>
                         <view class="bold"><text class="unit">¥</text>{{order.goods_price}}</view>
                     </view>
                     <view class="wlkflex other-info mt30 justify-between">
                         <view class="order-title mr10">优惠券抵扣：</view>
                         <view class="bold price"><text class="unit">¥</text>{{order.coupon_price}}</view>
                     </view>
                     <view class="wlkflex other-info mt30 justify-between">
                         <view class="order-title mr10">实付款：</view>
                         <view class="bold price"><text class="unit">¥</text>{{order.total_fee}}</view>
                     </view>
                     <view class="wlkflex other-info mt30 justify-between">
                         <view class="order-title mr10">创建时间：</view>
                         <view class="col9">{{$u.timeFormat(order.createtime, 'yyyy-mm-dd hh:MM:ss')}}</view>
                     </view>
                     <view class="wlkflex other-info mt30 justify-between" v-if="order.status>0">
                         <view class="order-title mr10">付款时间：</view>
                         <view class="col9">{{$u.timeFormat(order.paytime, 'yyyy-mm-dd hh:MM:ss')}}</view>
                     </view>
                     <view class="wlkflex justify-center mt50">
                         <view class="wlkflex justify-center kf-box" @click="openWork">
                             <uni-icons type="headphones" size="22" :color="themeColor"></uni-icons>
                             <text class="ml05">平台客服</text>
                         </view>

                     </view>
                 </view>
             </view>
            <view class="wlk-fixed-btn wlkflex justify-end">
                <view class="btn-item" v-if="order.status=='-2'">
                    <u-button :customStyle="{
			                margin:'0',
			                width:'100%',
			                fontSize:'14rpx',
			                height:'70rpx'
                         }" type="info" plain shape="circle"  text="交易关闭"></u-button>

                </view>
                <view class="btn-item" v-if="order.status=='-1'">
                    <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'70rpx'
                         }" type="info" plain shape="circle"  text="已取消"></u-button>

                </view>
                <view class="btn-item" v-if="order.status=='3'">
                    <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'70rpx'
                         }" type="info" plain shape="circle"  text="已完成"></u-button>

                </view>
                <view class="btn-item" v-if="order.status=='0'" @click="cancelModel=true">
                    <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'70rpx'
                         }" type="info" plain shape="circle"  text="取消订单"></u-button>

                </view>
                <view class="btn-item" v-if="order.status=='0'" @tap.stop="$Router.push('/pages/pay/pay?type=goods&id='+order.id)">
                    <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'70rpx'
                         }" :color="themeColor" plain shape="circle" text="立即支付"></u-button>

                </view>
                <view class="btn-item" v-if="order.status=='1'" @click="finishModel=true">
                    <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'70rpx'
                         }" :color="themeColor" plain shape="circle"  text="确认完成"></u-button>

                </view>
            </view>
        </block>
        <u-popup :customStyle="{width:'92%',whiteSpace: 'nowrap',padding:'30rpx 30rpx'}" :show="showCode" closeOnClickOverlay
                 closeable mode="center" round="10" @close="closeCode">
          <block v-if="!$u.test.isEmpty(codeList)">
            <scroll-view class="scroll mt50" scroll-x="true">
              <view v-for="(code,index) in codeList" class="code-list mr20 center br08" @click="codeIndex=index">
                <u--text :bold="index==codeIndex" :color="index==codeIndex?themeColor:''" :text="'核销码'+(index+1)"
                         size="14"></u--text>
              </view>
            </scroll-view>
            <view class="mt50 wlkflex justify-center relative wrap">
              <view class="wlkflex justify-center">
                <l-painter :css="{width: '280rpx',height:'280rpx',position:'relative'}">
                  <template>
                    <l-painter-view>
                      <l-painter-qrcode
                          :css="{width: '280rpx',height:'280rpx'}"
                          :text="codeList[codeIndex]?codeList[codeIndex].url:''"
                      />
                    </l-painter-view>
                    <l-painter-view v-if="codeList[codeIndex].status > 1"
                                    css="position: absolute;display:flex;justify-content:center;align-items:center;height: 280rpx;width: 280rpx;background-color: rgba(255,255,255,0.8)">
                      <l-painter-image
                          css="width: 140rpx"
                          src="/static/images/verify.png"
                      />
                    </l-painter-view>
                  </template>
                </l-painter>
                    </view>
              <!--                    <view class="verify-status wlkflex justify-center" v-if="codeList[codeIndex].status >= 1">
                                      <image class="block" src="/static/images/verify.png" mode="widthFix"></image>
                                  </view>-->

                    <view class="wd100 mt30 wlkflex justify-center" @tap.stop="$Router.push('/pages/merch/list')">
                        <u-button :customStyle="{
			            margin:'0',
			            width:'50%',
			            fontSize:'14rpx',
			            height:'90rpx'
                         }" :color="themeColor" icon="map" iconColor="#FFFFFF"  shape="circle"  text="适用商家"></u-button>

                    </view>
                </view>

                <u-divider text="核销信息"></u-divider>
                <view class="info">
                    <view class="wlkflex">
                        <view class="title col9">核销码：</view>
                        <view class="input">{{codeList[codeIndex].code}}</view>
                        <view class="copy_btn ml10 br04" @click="copyOrderSn(codeList[codeIndex].code)">点击复制</view>
                    </view>
                    <view class="wlkflex mt10">
                        <view class="title col9">状态：</view>
                        <view class="input">{{codeList[codeIndex].status_text}}</view>
                    </view>
                    <view class="wlkflex mt10" v-if="codeList[codeIndex].status >= 1">
                        <view class="title col9">核销时间：</view>
                        <view class="input">{{$u.timeFormat(codeList[codeIndex].verifytime, 'yyyy-mm-dd hh:MM:ss')}}</view>
                    </view>
                </view>
            </block>
        </u-popup>

        <u-popup safeAreaInsetBottom  :show="refundModel" closeable @close="refundModel=false" round="20">
            <view class="refund-item relative wd100" v-if="!$u.test.isEmpty(refundItem.goods)">
                <view class="pd30">
                    <view class="center title">确认退款信息</view>
                    <view class="wlkflex justify-between align-start mt50">
                        <view class="refund-goods-img br04 overHidden">
                            <image class="wd100 hg100" lazy-load :src="refundItem.goods.goods_images[0]"  mode="aspectFill"/>
                        </view>
                        <view class="refund-goods-main">
                            <view class="refund-goods-title u-line-2">
                                {{refundItem.goods.goods_title}}
                            </view>
                            <view class="refund-goods-date u-line-1 col9">
                                {{refundItem.goods.goods_desc}}
                            </view>
                            <view class="wlkflex justify-between mt20">
                                <view class="refund-goods-date">
                                    x <text class="ml05">{{refundItem.goods.goods_quantity}}</text>
                                </view>
                                <view class="refund-goods-price bold">
                                    ¥ <text>{{refundItem.goods.total_fee}}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="mt30 item-info">
                        <u--form
                                labelPosition="left"
                                :model="refundItem"
                                ref="uForm"
                                labelWidth="100"
                                :labelStyle="{fontSize:'28rpx'}"
                        >
                            <u-form-item
                                    label="退款金额"
                                    ref="item1"
                            >
                                <u--input
                                        prefixIcon="rmb"
                                        v-model="refundItem.refund_fee"
                                        border="none"
                                        color="#FF5904"
                                        fontSize="14"
                                        :prefixIconStyle="{color:'#FF5904'}"
                                ></u--input>
                            </u-form-item>
                            <u-form-item
                                    label="申请备注"
                                    ref="item1"
                            >
                                <u--textarea :customStyle="{backgroundColor:'#F9F9F9'}" border="none" v-model="refundItem.remark" ></u--textarea>
                            </u-form-item>
                        </u--form>
                        <view class="wlk-fixed-btn">
                            <u-button :customStyle="{
			                        borderRadius:'8px',
			                        margin:'0 auto',
			                        width:'92%'
                                }" :color="themeColor" size="large" @click="submitModel=true" text="提交申请"></u-button>
                        </view>

                    </view>
                </view>
            </view>
        </u-popup>
        <u-modal :show="finishModel" title="提示" showCancelButton @confirm="finish" @cancel="finishModel=false" :confirmColor="themeColor" content="是否确认订单已完成？"></u-modal>
        <u-modal :show="cancelModel" title="提示" showCancelButton @confirm="cancel" @cancel="cancelModel=false" :confirmColor="themeColor" content="是否确认取消订单？"></u-modal>
        <u-modal :show="submitModel" title="提示" showCancelButton @confirm="submit" @cancel="submitModel=false" :confirmColor="themeColor" content="是否确认提交退款申请？"></u-modal>
    </view>
</template>
<script>
    import {rgbaToRgb,copy,toUrl,toWork} from '@/wlkutils/tools';
    import {mapMutations, mapGetters} from 'vuex';
    var _self;
    export default {
        computed: {
            ...mapGetters(['themeColor','initMain','service'])
        },
        onLoad() {
            _self = this;
            _self.id  = this.$Route.query.id;
        },
        data() {
            return {
                timeData: {},
                id: '',
                showCode:false,
                showItem:false,
                refundModel:false,
                finishModel:false,
                cancelModel:false,
                submitModel:false,
                order: [],
                refund_order: [],
                codeList: [],
                refundItem:{
                    goods:{},
                    remark: '',
                    refund_fee: '',
                },
                color: '',
                loading:true,
                codeIndex:0,

            }
        },
        onShow() {
            this.color = uni.$u.colorToRgba(rgbaToRgb(this.themeColor), 0.01);
            this.getData();
        },
        watch: {
            themeColor(val) {
                _self.color = uni.$u.colorToRgba(rgbaToRgb(val), 0.01);
            }
        },
        methods: {
          closeCode() {
            this.showCode = false;
            this.codeIndex = 0;
          },
          onChange(e) {
            this.timeData = e;
          },
          async getData() {
            this.loading = true;
            uni.$u.http.post('order/getDetail', {
              id: _self.id
            }).then(res => {
              _self.order = res.data.order;
              _self.refund_order = res.data.refund_order;
                    _self.loading = false;
                }).catch(res => {
                })
            },
            copyOrderSn(v){
                copy(v);
            },
            cancel(){
                uni.$u.http.post('order/cancel', {
                    id: _self.id,
                    type:'line'
                }).then(res => {
                    _self.cancelModel = false;
                    _self.getData();
                }).catch(res => {
                })
            },
            finish(){
                uni.$u.http.post('order/finish', {
                    id: _self.id,
                    type:'goods'
                }).then(res => {
                    _self.finishModel = false;
                    _self.getData();
                }).catch(res => {
                })
            },
            showRefund(goods){
                if(goods.refund_id>0){
                    toUrl('/pages/order/refund?id='+goods.refund_id);
                }else{
                    this.refundItem.goods = goods;
                    this.refundItem.refund_fee = goods.pay_price;
                    this.refundModel=true;
                }

            },
            submit(){
                if(this.refundItem.refund_fee>this.refundItem.goods.pay_price){
                    uni.$u.toast('申请金额不能大于商品价格');
                    return false;
                }
                uni.$u.http.post('refund/refund', {
                    id: _self.id,
                    order_item_id: _self.refundItem.goods.id,
                    type:'goods',
                    refund_fee:_self.refundItem.refund_fee,
                    remark:_self.refundItem.remark,
                }).then(res => {
                    _self.submitModel = false;
                    _self.refundModel = false;
                    _self.getData();
                }).catch(res => {
                })
            },
            qrCode(list){
                this.codeList = list;
                this.showCode = true;
            },
            openWork(){
                toWork(this.service.kf_url,this.service.corp_id);
            },
        }
    };
</script>
<style lang="scss">
    page{
        padding-bottom: 150rpx;
        .detail-bc {
            padding: 30rpx 30rpx 0  30rpx;
            .d-status{
                .status-info{
                    .status-text{
                        font-size: $font-max;
                    }
                    .time-info{
                        font-size: $font-base;
                        .title{
                            color:$uni-text-color-grey;
                        }
                        .time {
                            @include flex;
                            align-items: center;

                            &__item {
                                color:$-wash-price-color;
                                font-size: $font-base;
                                text-align: center;
                            }
                        }
                    }
                }
                .desc{
                    font-size: $font-base;
                    color:$uni-text-color-grey;
                }

            }
            .order-info{
                font-size: $font-base;
                .order-title{
                    width: 22%;
                }
                .order-wd-title{
                    color:$uni-text-color-grey;
                    width: 23%;
                }
                .copy-btn{
                    padding: 5rpx 20rpx;
                    border-radius: 30rpx;
                    border:$-solid-border ;
                    font-size: $font-sm;
                    color:$uni-text-color-grey;
                }
            }

        }
        .head-title{
            font-size: $font-lg;
            image{
                width: 40rpx;
            }
            .desc{
                font-size: $font-base;
                font-weight: normal;
            }
        }
        .goods-list{
            font-size: $font-base;
            .goods-info{
                .o-info-img{
                    width: 200rpx;
                    height:  200rpx;
                    text-align: center
                }
                .o-info-main{
                    width: 65%;
                    .o-main-title{
                        font-size: $font-lt;
                        font-weight: bold;
                    }
                    .o-main-date{
                        font-size: $font-sm;
                        color: #666;
                    }
                    .o-main-price{
                        font-size: $font-sm;
                        color: #333333;
                        text{
                            font-size: $font-base;
                        }
                    }
                    .o-main-qrcode{
                        border-radius: 80rpx;
                        padding: 10rpx 20rpx;
                        font-size: $font-sm;
                        background-color: #f3f3f3;
                        color: #666666;
                    }
                    .o-main-status{}
                    .o-main-user{
                        font-size: $font-sm;
                        color: #666;
                    }
                }
                .goods-btn{

                }
            }
            .other-info{
                .unit{
                    font-size: $font-sm;
                }
                .price{
                    color: $-wash-price-color;
                }
            }
            .kf-box{
                width: 200rpx;
                font-size: $font-base;
            }
        }
        .scroll{
            .code-list{
                font-size: $font-base;
                padding: 25rpx 30rpx;
                background-color: #F3F3F3;
                display: inline-block;
            }
        }
        .verify-status{
            position: absolute;
            height: 280rpx;
            width: 280rpx;
            top:0;
            background-color: rgba(255,255,255,0.8);
            image{
                width: 140rpx;
            }
        }
        .foot{
            font-size: $font-base;
            margin: 40rpx 0 40rpx 0;
        }
        .info{
            font-size: $font-base;
            .title{

            }
            .copy_btn{
                background-color: #F3F3F3;
                color: #666;
                padding: 5rpx 10rpx;
            }
        }
        .btn-item{
            width: 25%;
            margin-right: 30rpx;
        }
        .wlk-fixed-btn{
            min-height: 118rpx;
        }
        .refund-item{
            padding-bottom: 150rpx;
            min-height: 900rpx;
            .refund-goods-img{
                width: 180rpx;
                height:  180rpx;
                text-align: center
            }
            .refund-goods-main{
                width: 71%;
                .refund-goods-title{
                    font-size: $font-lt;
                    font-weight: bold;
                }
                .refund-goods-date{
                    font-size: $font-sm;
                    color: #666;
                }
                .refund-goods-price{
                    font-size: $font-sm;
                    color: #333333;
                    text{
                        font-size: $font-base;
                    }
                }
            }
            .title{
                font-size: $font-lg;
                color: $uni-text-color;
                font-weight: bold;
            }
            .item-info{
                font-size: $font-base;
            }
            .wlk-fixed-btn{
                box-shadow: none;
                left:0
            }
        }

    }

</style>
